<template>
	<el-main class="bg table_wrap goods">
	   <div class='div-form'>
		<el-form
		  ref="elFormRef"
		  :model="formInline"
		  label-width="90px"
		  :style="{ width: '100%' }"
		  label-position="left"
		>
		  <el-row :gutter="20">
			<el-col :span="5">
			  <el-form-item label="标题">
				  <el-input v-model="formInline.title"></el-input>
			  </el-form-item>
			</el-col>
			<el-col :span="5">
			  <el-form-item label="标签">
				  <el-input v-model="formInline.tag"></el-input>
			  </el-form-item>
			</el-col>
			<el-col :span="5">
			  <el-form-item label="分类">
				<el-select
				  v-model="formInline.type"
				  collapse-tags
				  collapse-tags-tooltip
				  placeholder="请选择"
				>
				<el-option v-for="(o,i) in list_goods_type" :value="o.name" :key="i" :label="o.name"></el-option>
				</el-select>
			  </el-form-item>
			</el-col>
		  </el-row>
		</el-form>
	  </div>
	  <baseTable  :tableColumns="columns"  requestApi='/api/goods/get_list' 
	   :isShowSelect="true" 
	   :vm="vm" 
		v-model:isRefresh="isRefresh" 
		:otherParams="formInline"
	   @handleSelectionChange="handleSelectionChange"
	   @handleCurrentChangeNew="handleCurrentChangeNew"
	   >
	   <!-- 头部按钮 -->
		  <template #baseHeadFunt>
			  <el-button type="primary" @click="onSubmit">查询</el-button>
			  <el-button @click="onReset(true)">重置</el-button>
			<!-- <el-button  v-if="user_group == '管理员' || $check_action('/goods/view')" @click="router.push('./view?')" class="search_btn_del">添加</el-button> -->
			<el-button  v-if="user_group == '管理员' || $check_action('/goods/table','del')" class="search_btn_del" type="danger" @click="delInfo()">删除</el-button>
		  </template>
	  <!-- 操作 -->
	    <template #baseTableFunt="{ scope }">
			  <el-button type="primary"  v-if="user_group == '管理员' || $check_action('/goods/table','set')" size="small" @click="router.push('./view?goods_id='+scope.row.goods_id)">详情</el-button>
			  <el-button type="primary"  size="small" v-if="user_group == '管理员' || $check_action('/goods/table','set')" @click="router.push('../comment/table?size=10&page=1&source_table=goods&source_field=' + field + '&source_id=' + scope.row[field])">查看评论</el-button>
		  </template>
		  <template #baseTableFunt2="{ scope }">
			  <el-button type="primary"  v-if="user_group == '管理员' || $check_action('/goods/table','set')" size="small" @click="router.push('./view?goods_id='+scope.goods_id)">详情</el-button>
			  <el-button type="primary"  size="small" v-if="user_group == '管理员' || $check_action('/goods/table','set')" @click="router.push('../comment/table?size=10&page=1&source_table=goods&source_field=' + field + '&source_id=' + scope[field])">查看评论</el-button>
		  </template>
		  <template #tableContent="{ scope, column }">
		  <span v-if="column.prop === 'img'">
			<el-image
			:preview-teleported="true"
			style="width: 60px; height: 60px"
			:src="$fullUrl($banseUrl,scope.row.img)"
			:preview-src-list="[$fullUrl($banseUrl,scope.row.img)]"
			:initial-index="0"
			fit="cover"
			>
			   </el-image>
			 </span> 
			 <span v-if="column.prop === 'create_time'">{{
          formatDate(scope.row.create_time)
        }}</span>
        <span v-if="column.prop === 'update_time'">{{
          formatDate(scope.row.update_time)
        }}</span>
		</template>
		<template #tableContent2="{ scope, column }">
		  <span v-if="column.prop === 'img'">
			<el-image
			:preview-teleported="true"
			style="width: 60px; height: 60px"
			:src="$fullUrl($banseUrl,scope.img)"
			:preview-src-list="[$fullUrl($banseUrl,scope.img)]"
			:initial-index="0"
			fit="cover"
			>
			   </el-image>
			 </span> 
			 <span v-if="column.prop === 'create_time'">{{
          formatDate(scope.create_time)
        }}</span>
        <span v-if="column.prop === 'update_time'">{{
          formatDate(scope.update_time)
        }}</span>
		</template>
	  </baseTable>
	  </el-main>
  </template>
  <script setup>
  import { useRouter} from "vue-router";
  let router = useRouter();
  import {
	$get_auth,
	func,
	paramsFun,
	$fullUrl,
	formatDate,
	$banseUrl,
	$check_action,
  } from "@/utils/utils.js";
  import { $post, $get } from "@/api/Api.js";
  import {Picture} from "@element-plus/icons-vue";
  import { ElMessage} from "element-plus";
  import { ref,toRefs,computed,onMounted} from "vue"
  import storageHelper from '@/libs/StorageHelper'
  let user_group = storageHelper.getUserInfo().user_group;
  let table=ref("goods")
  
  let	field=ref("goods_id")
  let	url_get_list=ref("/api/goods/get_list")
  let	url_del=ref( "/api/goods/del?")
  let vm=ref({
	img: "img",
	id: "goods_id",
	title: "title",
	description: "description",
	create_time: "create_time",
	content: "content",
	praise_len: "praise_len",
	hits: "hits",
  
  })
  // 列名
  const columns =[
  { "prop": "title", "label": "标题" },
  { "prop": "img", "label": "封面图" },
  { "prop": "title", "label": "卖价" },
  { "prop": "price_ago", "label": "原价" },
  { "prop": "inventory", "label": "商品库存" },
  { "prop": "sales", "label": "销量" },
  { "prop": "hits", "label": "点击量" },
  { "prop": "type", "label": "产品分类" },
  { "prop": "description", "label": "描述" },
  { "prop": "create_time", "label": "创建时间" },
  { "prop": "update_time", "label": "更新时间" },
  ]
  // 刷新table
  let isRefresh = ref(false)
  let list_goods_type= ref([])
  //批量勾选数据框
  let selectList = ref([])
  //点击数据
  let currentRowTableProduct = ref({})
  //表格勾选回调
  let handleSelectionChange = (val) => {
	console.log(val)
	selectList.value = val.map((item) => {
	  console.log(item.goods_id)
	  if(item.goods_id!==undefined){
		return item.goods_id
  
	  }else{
		return item
  
	  }
	  console.log(item)
	
	})
  }
  //点击当前行
  let handleCurrentChangeNew = (val) => {
	currentRowTableProduct.value = val
  }
  // 头部搜索// 搜索
  
  let formInline = ref({
	title: "",
	tag: "",
	type: "",
	
  })
  // 搜索
  let onSubmit = () => {
	isRefresh.value = true
  }
  // 重置
  let onReset = (refresh) => {
	formInline.value = {
		title: "",
		tag: "",
		type: "",
	}
	isRefresh.value = refresh
  }
  // 批量删除删除
  let delInfo = () => {
	ElMessageBox.confirm(
	  '此操作将永久删除该文件, 是否继续?',
	  '提示',
	  {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	  }
	)
	  .then(() => {
		selectList.value.map((item) => {
		  delFun(item)
		})
	  })
	  .catch(() => {
		ElMessage({
		  type: 'info',
		  message: '取消操作',
		})
	  })
  }
   
  // 调用删除方法
  let delFun= (id) => {
	$get(url_del.value+"goods_id="+id).then((json)=> {
	  if (json.result) {
		ElMessage.success('删除成功');
	  } else if (json.error) {
		ElMessage.error(json.error.message);
	  }
	  isRefresh.value = true
	});
  
  }
  
  //获取论坛分类
  let get_goods_type= async() =>{
	  let json = await $get("/api/goods_type/get_list");
	  if(json.result){
		list_goods_type.value = json.result.list;
	  }
	  else if(json.error){
		  console.error(json.error);
	  }
  }
  onMounted(()=>{
	 get_goods_type()
  })
  </script>
  <style lang="less" scoped>
  .div-form{
  padding:10px;
  }
  </style>